import React, { useEffect, useState } from 'react';
import styles from './index.module.css';

const FirstMenu: React.FC = () => {
  const [blur, setBlur] = useState(false);
  const menuItems = [
    'File',
    'Edit',
    'Song',
    'View',
    'Controls',
    'Account',
    'Help',
  ];

  useEffect(() => {
    const onBlur = () => setBlur(true);
    const onFocus = () => setBlur(false);
    window.addEventListener('blur', onBlur);
    window.addEventListener('focus', onFocus);
    return () => {
      window.removeEventListener('blur', onBlur);
      window.removeEventListener('focus', onFocus);
    };
  }, []);

  return (
    <div className={`${styles.firstMenu}`}>
      {menuItems.map((item) => (
        <button key={item} className={styles.menuItem}>
          {item}
        </button>
      ))}
    </div>
  );
};

export default FirstMenu; 